<template>
  <div class="SearchMain">
    <div class="Search-box">
      <Search_box></Search_box>
    </div>
    <div class="Search-Fun">
      <div @click="load_Weather">
        <el-button type="text" @click="WeatherDialog = true">
          <div class="weather"></div>
          <p class="fun-text">天气</p>
        </el-button>
        <el-dialog
          title="天气查询(城镇)"
          :visible.sync="WeatherDialog"
          width="30%"
          custom-class="Weather_Dialog"
          center
        >
          <Weather ref="load_Weather"></Weather>
        </el-dialog>
      </div>
      <div>
        <el-button type="text" @click="videoDialog = true">
          <div>
            <svg
              t="1633445785821"
              class="icon"
              viewBox="0 0 1241 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2443"
            >
              <path
                d="M193.84646453 62h872.72727276c60.00000029 0 109.09090898 49.09090869 109.09090899 109.09090898v681.81818204c0 60.00000029-49.09090869 109.09090898-109.09090899 109.09090898H193.84646453c-60.00000029 0-109.09090898-49.09090869-109.09090898-109.09090898V171.09090898c0-60.00000029 49.09090869-109.09090898 109.09090898-109.09090898z"
                fill="#2F77F1"
                p-id="2444"
              ></path>
              <path
                d="M84.75555555 225.63636348h1090.90909072v54.54545449H84.75555555v-54.5454545z m673.63636377 340.90909101c9.5454545 5.4545458 15.00000029 16.36363653 15.0000003 27.27272725s-5.4545458 21.81818145-15.0000003 27.27272724L589.30101004 726.09090928c-9.5454545 5.4545458-21.81818145 5.4545458-31.36363594-1e-8-9.5454545-5.4545458-16.36363653-16.36363653-15.00000029-27.27272724V490.18181855c0-10.90909073 5.4545458-21.81818145 15.00000029-27.27272724 9.5454545-5.4545458 21.81818145-5.4545458 31.36363594 0L758.39191932 566.54545449z"
                fill="#AFFCFE"
                p-id="2445"
              ></path>
            </svg>
          </div>
          <p class="fun-text">视频</p>
        </el-button>
        <el-dialog :visible.sync="videoDialog" width="90%" center>
          <VideoApi></VideoApi>
        </el-dialog>
      </div>
      <div>
        <el-button type="text" @click="fanyiDialog = true">
          <div>
            <svg
              t="1633447039537"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6606"
              width="200"
              height="200"
            >
              <path
                d="M608 416h288c35.36 0 64 28.48 64 64v416c0 35.36-28.48 64-64 64H480c-35.36 0-64-28.48-64-64v-288H128c-35.36 0-64-28.48-64-64V128c0-35.36 28.48-64 64-64h416c35.36 0 64 28.48 64 64v288z m0 64v64c0 35.36-28.48 64-64 64h-64v256.032c0 17.664 14.304 31.968 31.968 31.968H864a31.968 31.968 0 0 0 31.968-31.968V512a31.968 31.968 0 0 0-31.968-31.968H608zM128 159.968V512c0 17.664 14.304 31.968 31.968 31.968H512a31.968 31.968 0 0 0 31.968-31.968V160A31.968 31.968 0 0 0 512.032 128H160A31.968 31.968 0 0 0 128 159.968z m64 244.288V243.36h112.736V176h46.752c6.4 0.928 9.632 1.824 9.632 2.752a10.56 10.56 0 0 1-1.376 4.128c-2.752 7.328-4.128 16.032-4.128 26.112v34.368h119.648v156.768h-50.88v-20.64h-68.768v118.272H306.112v-118.272H238.752v24.768H192z m46.72-122.368v60.48h67.392V281.92H238.752z m185.664 60.48V281.92h-68.768v60.48h68.768z m203.84 488H576L668.128 576h64.64l89.344 254.4h-54.976l-19.264-53.664h-100.384l-19.232 53.632z m33.024-96.256h72.864l-34.368-108.608h-1.376l-37.12 108.608zM896 320h-64a128 128 0 0 0-128-128V128a192 192 0 0 1 192 192zM128 704h64a128 128 0 0 0 128 128v64a192 192 0 0 1-192-192z"
                fill="#1296db"
                p-id="6607"
              ></path>
            </svg>
          </div>
          <p class="fun-text">翻译</p>
        </el-button>
        <el-dialog
          :visible.sync="fanyiDialog"
          width="25%"
          title="翻译"
          custom-class="fanyi-Dialog"
          center
        >
          <Fanyi></Fanyi
        ></el-dialog>
      </div>
      <div>
        <el-button type="text" @click="NodesDialog = true">
          <div>
            <svg
              t="1632730688986"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="27657"
              width="200"
              height="200"
            >
              <path
                d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z"
                fill="#92BE33"
                p-id="27658"
              ></path>
              <path
                d="M1024 512c0-34.224-3.464-67.664-9.944-100.056l-346.12-159.76-294.48-1.896s-75.08-11.896-75.08 55.384 4.312 410.736 4.312 410.736l1.872 52.48 189.04 254.64c6.12 0.224 12.232 0.472 18.4 0.472 281.6 0 512-230.4 512-512z"
                fill="#61872E"
                p-id="27659"
              ></path>
              <path
                d="M701.576 293.768c10.728 7.384 17.792 19.736 17.792 33.672v445.184c0 22.464-18.376 40.84-40.84 40.84h-302.24c-12.84 0-24.352-6.008-31.856-15.352"
                fill="#F1F9FD"
                p-id="27660"
              ></path>
              <path
                d="M678.528 819.816h-302.24c-14.352 0-27.768-6.464-36.816-17.736a6.346 6.346 0 0 1 0.976-8.928 6.372 6.372 0 0 1 8.944 0.976c6.616 8.24 16.424 12.968 26.896 12.968H678.52c19.008 0 34.488-15.464 34.488-34.48V327.44c0-11.328-5.624-21.96-15.04-28.44a6.36 6.36 0 1 1 7.208-10.48c12.864 8.856 20.544 23.4 20.544 38.912v445.176c0 26.032-21.168 47.208-47.192 47.208M573.544 257.56h-29.096c-3.512 0-6.352-2.848-6.352-6.36s2.84-6.36 6.352-6.36h29.096a6.354 6.354 0 0 1 6.352 6.36c0 3.512-2.84 6.36-6.352 6.36M516.872 257.56h-30.376c-3.512 0-6.352-2.848-6.352-6.36s2.84-6.36 6.352-6.36h30.376a6.354 6.354 0 0 1 6.352 6.36c0 3.512-2.84 6.36-6.352 6.36M458.168 257.56H429.76c-3.512 0-6.352-2.848-6.352-6.36s2.84-6.36 6.352-6.36h28.408a6.354 6.354 0 0 1 6.352 6.36c0 3.512-2.84 6.36-6.352 6.36M400.472 257.56h-29.096c-3.512 0-6.352-2.848-6.352-6.36s2.84-6.36 6.352-6.36h29.096a6.354 6.354 0 0 1 6.352 6.36c0 3.512-2.84 6.36-6.352 6.36"
                fill="#474341"
                p-id="27661"
              ></path>
              <path
                d="M600.088 251.192h42.44c22.464 0 40.84 18.384 40.84 40.84v445.184c0 22.456-18.376 40.84-40.84 40.84H340.296c-22.464 0-40.84-18.384-40.84-40.84V292.04c0-22.464 18.376-40.84 40.84-40.84"
                fill="#F1F9FD"
                p-id="27662"
              ></path>
              <path
                d="M642.528 784.424H340.296c-26.024 0-47.192-21.176-47.192-47.208V292.04c0-26.024 21.176-47.2 47.192-47.2 3.512 0 6.352 2.848 6.352 6.36s-2.84 6.36-6.352 6.36c-19.016 0-34.488 15.464-34.488 34.48v445.184c0 19.024 15.472 34.488 34.488 34.488h302.232c19.016 0 34.488-15.464 34.488-34.488V292.04c0-19.016-15.472-34.48-34.488-34.48h-42.44c-3.512 0-6.352-2.848-6.352-6.36s2.84-6.36 6.352-6.36h42.44c26.024 0 47.2 21.176 47.2 47.2v445.184c0 26.024-21.176 47.2-47.2 47.2"
                fill="#474341"
                p-id="27663"
              ></path>
              <path
                d="M644.432 372.048h-54.296a4.448 4.448 0 0 1 0-8.896h54.296c2.456 0 4.448 1.984 4.448 4.448a4.44 4.44 0 0 1-4.448 4.448M564.504 372.048H336.136a4.448 4.448 0 0 1 0-8.896h228.376a4.45 4.45 0 0 1-0.008 8.896M644.432 414.984h-137.024a4.448 4.448 0 0 1 0-8.896h137.032c2.456 0 4.448 1.984 4.448 4.448s-1.992 4.448-4.456 4.448M487.432 414.984h-151.304a4.448 4.448 0 0 1 0-8.896h151.296c2.456 0 4.448 1.984 4.448 4.448a4.432 4.432 0 0 1-4.44 4.448M644.432 457.92H576.88a4.448 4.448 0 0 1 0-8.896h67.552c2.456 0 4.448 1.984 4.448 4.448a4.44 4.44 0 0 1-4.448 4.448M556.312 457.92H336.136a4.448 4.448 0 0 1 0-8.896h220.176a4.448 4.448 0 0 1 0 8.896M644.432 500.864H435.096a4.448 4.448 0 0 1 0-8.896H644.44a4.45 4.45 0 0 1-0.008 8.896M408.56 500.864h-72.424a4.448 4.448 0 0 1 0-8.896h72.424a4.448 4.448 0 0 1 0 8.896M644.432 543.8h-35.04a4.448 4.448 0 0 1 0-8.896h35.04c2.456 0 4.448 1.984 4.448 4.448a4.434 4.434 0 0 1-4.448 4.448M583.928 543.8H336.136a4.448 4.448 0 0 1 0-8.896h247.792c2.456 0 4.448 1.984 4.448 4.448s-1.992 4.448-4.448 4.448M644.432 586.736H445.2a4.448 4.448 0 0 1 0-8.896h199.232c2.456 0 4.448 1.984 4.448 4.448a4.44 4.44 0 0 1-4.448 4.448M426.056 586.736h-89.92a4.448 4.448 0 0 1 0-8.896h89.928a4.45 4.45 0 0 1-0.008 8.896M644.432 629.68h-47.104a4.448 4.448 0 0 1 0-8.896h47.104c2.456 0 4.448 1.984 4.448 4.448a4.44 4.44 0 0 1-4.448 4.448M570.224 629.68H336.128a4.448 4.448 0 0 1 0-8.896h234.088c2.456 0 4.448 1.984 4.448 4.448a4.436 4.436 0 0 1-4.44 4.448M644.432 672.608h-215a4.448 4.448 0 0 1 0-8.896h215c2.456 0 4.448 1.984 4.448 4.448a4.434 4.434 0 0 1-4.448 4.448M408.56 672.608h-72.424a4.448 4.448 0 0 1 0-8.896h72.424c2.456 0 4.448 1.984 4.448 4.448a4.444 4.444 0 0 1-4.448 4.448M644.432 715.552h-60.456a4.448 4.448 0 0 1 0-8.896h60.456c2.456 0 4.448 1.984 4.448 4.448a4.44 4.44 0 0 1-4.448 4.448M558.152 715.552h-108.168a4.444 4.444 0 0 1-4.448-4.448c0-2.456 1.984-4.448 4.448-4.448h108.168a4.448 4.448 0 0 1 0 8.896M427.216 715.552h-91.08a4.448 4.448 0 0 1 0-8.896h91.08a4.448 4.448 0 0 1 0 8.896"
                fill="#0F95BC"
                p-id="27664"
              ></path>
              <path
                d="M358.528 278.928c-0.824 0-1.664-0.168-2.472-0.512a34.612 34.612 0 0 1-21.168-31.936c0-19.112 15.544-34.664 34.664-34.664s34.664 15.552 34.664 34.664a6.354 6.354 0 1 1-12.704 0c0-12.104-9.848-21.944-21.952-21.944s-21.952 9.848-21.952 21.944c0 8.84 5.264 16.784 13.408 20.232a6.354 6.354 0 0 1 3.376 8.328 6.366 6.366 0 0 1-5.864 3.888"
                fill="#474341"
                p-id="27665"
              ></path>
              <path
                d="M418.736 278.928c-0.824 0-1.664-0.168-2.472-0.512a34.604 34.604 0 0 1-21.16-31.936c0-19.112 15.544-34.664 34.656-34.664s34.664 15.552 34.664 34.664a6.354 6.354 0 1 1-12.704 0c0-12.104-9.848-21.944-21.952-21.944s-21.944 9.848-21.944 21.944c0 8.848 5.264 16.784 13.408 20.232a6.354 6.354 0 0 1 3.376 8.328 6.394 6.394 0 0 1-5.872 3.888"
                fill="#474341"
                p-id="27666"
              ></path>
              <path
                d="M476.016 278.928c-0.824 0-1.664-0.168-2.472-0.512a34.612 34.612 0 0 1-21.168-31.936c0-19.112 15.544-34.664 34.664-34.664 19.112 0 34.656 15.552 34.656 34.664a6.354 6.354 0 1 1-12.704 0c0-12.104-9.848-21.944-21.944-21.944-12.104 0-21.952 9.848-21.952 21.944 0 8.84 5.264 16.784 13.408 20.232a6.354 6.354 0 0 1 3.376 8.328 6.374 6.374 0 0 1-5.864 3.888"
                fill="#474341"
                p-id="27667"
              ></path>
              <path
                d="M536.216 278.928c-0.824 0-1.664-0.168-2.472-0.512a34.612 34.612 0 0 1-21.168-31.936c0-19.112 15.544-34.664 34.664-34.664 19.112 0 34.664 15.552 34.664 34.664a6.354 6.354 0 1 1-12.704 0c0-12.104-9.848-21.944-21.952-21.944s-21.952 9.848-21.952 21.944c0 8.84 5.264 16.784 13.408 20.232a6.354 6.354 0 0 1 3.376 8.328 6.366 6.366 0 0 1-5.864 3.888"
                fill="#474341"
                p-id="27668"
              ></path>
              <path
                d="M598.376 278.928c-0.824 0-1.664-0.168-2.472-0.512a34.612 34.612 0 0 1-21.168-31.936c0-19.112 15.544-34.664 34.664-34.664 19.112 0 34.656 15.552 34.656 34.664a6.354 6.354 0 1 1-12.704 0c0-12.104-9.848-21.944-21.944-21.944-12.104 0-21.952 9.848-21.952 21.944 0 8.84 5.264 16.784 13.408 20.232a6.354 6.354 0 0 1 3.376 8.328 6.374 6.374 0 0 1-5.864 3.888"
                fill="#474341"
                p-id="27669"
              ></path>
              <path
                d="M367.128 720.568a4.444 4.444 0 0 1-4.448-4.448V317.224a4.448 4.448 0 0 1 8.896 0v398.888a4.446 4.446 0 0 1-4.448 4.456"
                fill="#E9495B"
                p-id="27670"
              ></path>
            </svg>
            <p class="fun-text">笔记</p>
          </div>
        </el-button>
        <el-dialog
          :visible.sync="NodesDialog"
          width="70%"
          title="笔记(暂时只支持txt格式)"
          custom-class="Nodes_Dialog"
          center
        >
          <NodesDialog></NodesDialog
        ></el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import Search_box from "../components/Search-Box.vue";
import VideoApi from "../components/VideoApi.vue";
import Weather from "../components/Weather.vue";
import Fanyi from "../components/fanyi.vue";
import NodesDialog from "../components/Nodes.vue";

export default {
  name: "SearchMain",
  components: {
    Search_box,
    Weather,
    Fanyi,
    VideoApi,
    NodesDialog
  },
  data() {
    return {
      WeatherDialog: false,
      videoDialog: false,
      fanyiDialog: false,
      NodesDialog: false
    };
  },

  mounted() {},

  methods: {
    load_Weather() {
      //父组件调用子组件方法（初始化天气模块）
      this.$refs.load_Weather.getWeatenData();
    }
  }
};
</script>

<style lang="scss">
.video-dialog {
  height: 100% !important;
}
.SearchMain {
  transition: 1s all;
  width: 65%;
  .Search-Fun {
    transition: 1s all;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 100px 30px;
    .weather {
      width: 30px;
      height: 30px;
      border: 30px solid #0f7cff;
      background-color: #ffbf20;
      border-radius: 50%;
    }
    div:nth-child(2n) {
      text-align: right;
    }
    .fun-text {
      color: white;
      font-size: 18px;
      text-align: center;
      letter-spacing: 2px;
    }
    svg {
      width: 90px;
      height: 90px;
    }
  }
  .Search-box {
    transition: 1s all;
    text-align: center;
  }
}
.input-with-select {
  transition: 1s all;
}
@media screen and (max-width: 1440px) {
  .SearchMain {
    width: 85%;
  }

  .fanyi-Dialog {
    width: 50% !important;
  }
  .Weather_Dialog {
    width: 50% !important;
  }
}
@media screen and (max-width: 1200px) {
  .input-with-select {
    width: 30rem !important;
  }
  .Search_list {
    width: 29.8rem !important;
    margin-left: 0.2rem;
  }
  .fanyi-Dialog {
    width: 70% !important;
  }
  .Weather_Dialog {
    width: 70% !important;
  }
}
@media screen and (max-width: 860px) {
  .Search-Fun > div {
    width: 50%;
  }
  .Search_list {
    width: 19.8rem !important;
    margin-left: 0.5rem;
  }
  svg {
    width: 70px !important;
    height: 70px !important;
  }
  .fun-text {
    font-size: 16px !important;
  }
  .weather {
    width: 30px !important;
    height: 30px !important;
    border: 20px solid #0f7cff !important;
  }
  .input-with-select {
    width: 20rem !important;
  }
  .fanyi-Dialog {
    width: 70% !important;
  }
  .Weather_Dialog {
    width: 70% !important;
  }
  .Nodes_Dialog {
    width: 90% !important;
  }
  .search_btn > svg {
    width: 20px !important;
    height: 20px !important;
    margin-top: 5px !important;
  }
}
@media screen and (max-width: 550px) {
  // .Search-Fun > div {
  //   // width: 100%;
  //   // text-align: center !important;
  // }
  .Search_list {
    width: 9.8rem !important;
    margin-left: 0.5rem;
    font-size: 8px !important;
  }
  svg {
    width: 50px !important;
    height: 50px !important;
  }
  .fun-text {
    font-size: 14px !important;
  }
  .weather {
    width: 20px !important;
    height: 20px !important;
    border: 20px solid #0f7cff !important;
  }
  .Search-box {
    margin-top: 10rem;
  }
  .input-with-select {
    width: 10rem !important;
  }
  .Weather_Dialog {
    width: 80% !important;
  }
  .fanyi-Dialog {
    width: 80% !important;
  }
  .Nodes_Dialog {
    width: 90% !important;
  }
  .search_btn > svg {
    width: 20px !important;
    height: 20px !important;
    margin-top: 5px !important;
  }
}
@media screen and (max-width: 420px) {
  .Search-box {
    margin-top: 10rem;
  }
  .Weather_Dialog {
    width: 90% !important;
  }
  .weatherForm .el-form-item:nth-child(1) {
    width: 50% !important;
  }
  .Weather-items > li > p {
    font-size: 8px !important;
  }
  #Nodes_textarea {
    height: 30vh !important;
  }
  .search_btn > svg {
    width: 15px !important;
    height: 15px !important;
    margin-top: 5px !important;
  }
}
</style>
